<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			#iTab{
				width: 350px;
				font-size: 20px;
			}
			
			#iTab input{
				width: 200px;
				height: 25px;
			}
			
			
			#iTab #commit{
				width: 205px;
				height: 35px;
			}
			
			#sTab {
				width: 600px;
				border-collapse: collapse;
				text-align: center;
				
			}
		</style>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//点击提交处理事件
				$('#commit').on('click',function(){
					//获取商品编号
					var sp_id = $('#sNo').val()
					//获取商品名称
					var sp_name = $('#sName').val()
					//获取库存数量
					var sp_num = $('#sNum').val()
					//获取商品单价
					var sp_price = $('#sPrice').val()
					//正则表达式匹配字母开头的6位商品编号
					re = /^[A-z]\d{5}$/
					//匹配数字
					re_num = /^\d*$/
					//判断是否为空和与正则匹配商品编号
					if (re.test(sp_id)&&sp_name.length>0&& re_num.test(sp_num) && re_num.test(sp_price)) {
						//创建tr、td和放入数据后面添加删除的a标签
						$('#sTab').append('<tr><td>'+sp_id+'</td><td>'+sp_name+'</td><td>'+sp_num
						+'</td><td>'+sp_price+'</td><td><a href="#">删除</a></td></tr>')
					} else{
						alert('输入不规范！（未输入||或数量/单价不为数字||或商品编号不为字母开头的6位商品编号）')
					}
					//点击删除
					$('#sTab').on('click','a',function(){
						$(this).parents('tr').remove()
					})
				})
			
				
			})
		</script>
	</head>
	<body>
		<div id="box">
			<h1>商品信息录入</h1>
			<table id="iTab">
				<tr>
					<td>商品编号:</td>
					<td><input type="text" name="" id="sNo" value="" placeholder="请输入6位字母开头商品编号"/></td>
				</tr>
				<tr>
					<td>商品名称:</td>
					<td><input type="text" name="" id="sName" value="" placeholder="请输入商品名称"/></td>
				</tr>
				<tr>
					<td>库存数量:</td>
					<td><input type="text" name="" id="sNum" value="" placeholder="请输入库存数量"/></td>
				</tr>
				<tr>
					<td>商品单价:</td>
					<td><input type="text" name="" id="sPrice" value="" placeholder="请输入商品单价"/></td>
				</tr>
				<tr>
					<td></td>
					<td><button type="button" id="commit">确认提交</button></td>
				</tr>
			</table>
			<br />
			<br />
			<h1>商品信息表</h1>
			<!--
            	作者：offline
            	时间：2021-11-11
            	描述：商品目录表
            -->
            <table id="sTab" border="1px solid">
            	<tr>
            		<th>商品编号</th>
            		<th>商品名称</th>
            		<th>库存数量</th>
            		<th>商品单价(元)</th>
            		<th>操作</th>
            	</tr>
            	<tr>
            		<td>m12054</td>
            		<td>MacBook Pro</td>
            		<td>20</td>
            		<td>21035</td>
            		<td><a href="#">删除</a></td>
            	</tr>
            </table>
		</div>
		
	</body>
</html>
